
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#include "../common/head.ftl">
    <link rel="stylesheet" href="/js/plugins/treeview/bootstrap-treeview.css" type="text/css" />
    <script type="text/javascript" src="/js/plugins/treeview/bootstrap-treeview.js"></script>
</head>
<body>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl">
    <div class="row">
        <div class="col-sm-3">
            <#--设置当前要回显当前菜单,必须在载人菜单前完成设置-->
            <#assign menu = "area"/>
            <#include "../common/menu.ftl">
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">酒店地区管理</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div id="treeview"></div>
                </div>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="form-group" style="margin-left: 20px">
                            <a href="javascript:" class="btn btn-success" id="addAreaBtn">添加地区</a>
                        </div>
                    </div>

                    <form class="form-inline" id="searchForm" action="/area/list.do" method="post">
                        <input type="hidden" id="currentPage" name="currentPage" value="1">
                    </form>

                    <table class="table table-striped table-hover" >
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                            <th>操作</th>
                        </tr>
                        <tbody id="tbody">
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

<#--新增或更新-->
<div class="modal fade" id="areaModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/area/saveOrUpdate.do" method="post" id="editModalForm">
                    <input type="hidden" name="id"/>
                    <input type="hidden" name="parentId"/>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">上级地区：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="parentName" disabled/>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">地区：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="name"
                                   placeholder="请输入地区名称"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">推荐：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="state">
                                <option value="1">推荐</option>
                                <option value="0">不推荐</option>
                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="areaSaveUpdate">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
       $.post("/area/getArea.do",{"parentId":null},function (data) {
            console.log(data);
            $("#treeview").treeview({
                color: "#428bca",
                showTags: true,
                data: [{text: "全部地区",nodes: data}],
                //点击"+",加载子节点
                lazyLoad:function (node) {
                    $.get("/area/getArea.do",{"parentId":node.id},function (subData) {
                        console.log(subData);
                        //将子节点的内容拼接到节点后面(参数:子节点,父节点)
                        $("#treeview").treeview("addNode", [subData,node]);
                    })
                },

                //点击节点框,查询节点的所有数据
                onNodeSelected:function (event,node) {
                    console.log(node);
                    //将查询出的内容加载到tbody后面
                    $.get("/area/getArea.do",{"parentId":node.id},function (subData) {
                        console.log(subData);
                        var html = "";
                       $.each(subData,function (index, ele) {
                           html += "<tr><td>"+(index+1)+"</td><td>"+ele.text+"</td><td><a href='javascript:;' class='editBtn' data-json='"+ele.json+"'>编辑</a>-----<a href='javascript:;' class='deleteBtn' data-id='"+ele.id+"'>删除</a></td></tr>"
                       })
                        $("#tbody").html(html)

                        /*//不能放在外面,否则点击事件没有效果
                        $(".editBtn").click(function () {
                            //点击编辑按钮,弹出模态框
                            $("#areaModal").modal("show");
                        })*/
                    })


                }

            })
       })


        //jQuery动态绑定事件
        //$("#tbody")缩小查询的范围
        //".editBtn"事件的选择器
        $("#tbody").on("click",".editBtn",function () {
            //清除表单的内容
            $("#editModalForm").clearForm(true);
            var json = $(this).data("json");
            console.log(json);
            //显示模态框后,回显表单的内容
            //上级地区的回显,使用getSelected属性.
            console.log($("#treeview").treeview('getSelected'));//数组
            //父节点对象
            var parentNode=$("#treeview").treeview('getSelected')[0]

            if(json){
                $("#editModalForm input[name=id]").val(json.id);
                $("#editModalForm input[name=parentId]").val(parentNode.id);//重点关注
                $("#editModalForm input[name=parentName]").val(parentNode.text);
                $("#editModalForm input[name=name]").val(json.name);
                $("#editModalForm select[name=state]").val(json.state);
            }
            $("#areaModal").modal("show");
        })

        //绑定点击事件
        $("#areaSaveUpdate").click(function () {
            $("#editModalForm").ajaxSubmit(function (data) {
                if(data.success){
                    window.location.reload();
                }else{
                    $.messager.alert(data.msg)
                }

            })
        })

        $("#addAreaBtn").click(function () {
            //父节点对象
            var parentNode=$("#treeview").treeview('getSelected')[0]
            if(!parentNode){
                $.messager.alert("请至少选中一个地区")
                return;
            }
            $("#editModalForm input[name=parentId]").val(parentNode.id);//重点关注
            $("#editModalForm input[name=parentName]").val(parentNode.text);

            $("#areaModal").modal("show");
        })

        $("#tbody").on("click",".deleteBtn",function () {
            var id = $(this).data("id");
            $.get("/area/delete.do",{id:id},function (data) {
                if(data.success){
                    $.messager.alert("温馨提示","删除成功");
                    setTimeout(function () {
                        location.reload();
                    },2000)
                }
            })
        })


    })
</script>

</body>
</html>